<template>
  <div class="flower_box" >
    <!-- <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
    </transition>-->
    <div class="flower_Centent" :style="DefaultBackground">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list class="test" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="HeaderInformationBox">
            <div class="Avatar_Traffic">
              <div class="Avatar">
                <van-image width="100%" height="100%" lazy-load :src="Avatar?Avatar:DefaultAvatar" />
              </div>
              <div class="Traffic">
                <div class="BrowseIcon">
                  <van-icon name="eye" size="2em" color="#ffff" />
                </div>
                <div class="flow_Box">
                  <div class="TrafficToday">
                    <span class="TrafficTodayName">今日访客:</span>
                    <span class="TrafficTodayNumder">{{TrafficToday}}</span>
                  </div>
                  <div class="TotalFlow">
                    <span class="TotalFloName">访客总量:</span>
                    <span class="TotalFlowNumber">{{TotalFlow}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Tabbar栏 -->
          <div class="flower_Centent_Tabbar">
            <div class="Tabbar_Child_Box">
              <div class="Tabbar_Icon">
                <img src="../assets/icon/Photoalbum.png" alt />
              </div>
              <div class="Name">相册</div>
            </div>
            <div class="Tabbar_Child_Box" @click="TalkAbout">
              <div class="Tabbar_Icon">
                <img src="../assets/icon/TalkAbout.png" alt />
              </div>
              <div class="Name">说说</div>
            </div>
            <div class="Tabbar_Child_Box">
              <div class="Tabbar_Icon">
                <img src="../assets/icon/personalise.png" alt />
              </div>
              <div class="Name">个性化</div>
            </div>
            <div class="Tabbar_Child_Box">
              <div class="Tabbar_Icon">
                <img src="../assets/icon/game.png" alt />
              </div>
              <div class="Name">游戏</div>
            </div>
            <div class="Tabbar_Child_Box">
              <div class="Tabbar_Icon">
                <img src="../assets/icon/video.png" alt />
              </div>
              <div class="Name">小视屏</div>
            </div>
          </div>
          <ul class="dynamic_Box"    >
            <li class="dynamic"  v-for="(itme, index) in list" :key="index">
              <div class="dynamicHeader">
                <div class="dynamicHeaderAvatar">
                  <img :src="itme.AvatarImg?itme.AvatarImg:DefaultAvatar" alt />
                </div>
                <div class="dynamicHeaderName">{{Name?Name:'还没有登录'}}</div>
            
                <van-icon size="1.5em" class="ShareIt"  name="share" />
              </div>
              <p class="dynamic_text">{{itme.TalkAbout?itme.TalkAbout:'还没有登录啊 小老弟！！！'}}</p>
                <div class="dynamic_Img">
                  <van-image  
                @click="imageShow(itme.MyPicture)"
                width="100%"
                height="100%"
                lazy-load
                :src="itme.MyPicture"
              />
                </div>
                <div class="Comment_and_delete">
                <div class="Comment_and_delete_Icon_Box">
                    <van-icon class="Comment_and_delete_Icon" size="1.4em" name="good-job-o" /><span>:{{itme.Likes}}</span>
                </div>
                <van-icon @click="Delete(itme.id,itme.userId)" style=" margin: 0 0.2rem;" size="1.4em" name="delete" />
               
                </div>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
    </div>

    <van-image-preview v-model="show" :images="images" @change="onChange" :closeable="closeable">
      <template v-slot:index>第{{ index }}页</template>
    </van-image-preview>
  </div>
</template>
<script>
export default {
  data() {
    return {
      key: 1,

      show: true,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      DefaultBackground: "",
      Default: require("../assets/images/activityImages/u=1000359000,1887888077&fm=26&gp=0.jpg"),
      TrafficToday: '',
      TotalFlow: '',
      Avatar: "",
      DefaultAvatar: require("../assets/images/activityImages/grayHead.png"),
      Name: "",
      dynamicText:
        "好朋友只是朋友，还是朋友不能够占有，好朋友疯狂以后就一个人走，无所求, 如果有一天，我从你的生活中消失不见，你会不会像紧张她一样紧张我",
      show: false,
      index: 0,
      images: [],
      closeable:true
    };
  },
  components: {},
  beforeCreate: function() {
    // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  },
  created: function() {
    // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

    this.click(this.key);
     this.onLoad();
  },
  beforeMount: function() {},
  beforeDestroy: function() {
    this.$store.state.Right = false;
  },
  methods: {
    // 在挂载开始之前被调用：相关的 render 函数首次被调用。

    click(Vlue, key) {

    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        } 
              this.$store.state.Title = "互动";
      this.$store.state.LeftTitle = "";
      this.$store.state.arrow = false;
      this.$store.state.Right = true;

      let user = JSON.parse(localStorage.getItem("user"));
      if (user) {
        //登录过了
        this.Avatar = user.AvatarImg;
        this.Name = user.name;
        this.DefaultBackground =
" background-image: url('" + user.BugroundImg + "');"; 
        let THIS = this;
        this.axios
        .get(THIS.pathuiL + "MyWorld")
        .then(function(response) {
          // handle success
           
         THIS.list = response.data
         THIS.TrafficToday = THIS.list[0].VisitorsToday;
         
         THIS.TotalFlow = THIS.list[0].TotalVisitors
           
        })
        .catch(function(error) {
          // handle error
          console.log(error);
        })
        .then(function() {
          // always executed
        });             
      } else {
        //没有登录

        this.DefaultBackground =
          " background-image: url('" +
          " http://img2.imgtn.bdimg.com/it/u=3397079703,511890875&fm=15&gp=0.jpg" +
          "');";
         this.Toast('还没有登录')
      }
      
        this.loading = false;
        if( this.list.length>=1){
              this.finished = true;

              console.log(this.list.length)
        }

    
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    onChange(index) {
      this.index = index;
    },
    imageShow(img){
      this.images = [img]
     
      this.show = true;
    },
      Delete(id,userId) {
      //删除
let user = JSON.parse(localStorage.getItem("user"));
      debugger
      if(user.id===userId){
          let THIS = this;
      debugger
      THIS.axios
        .delete(THIS.pathuiL + "MyWorld/" + id)
        .then(function(response) {
          // handle success
          console.log(response);
          
        })
        .catch(function(error) {
          // handle error
          console.log(error);
        })
        .then(function() {
          // always executed
        });
      }else if(user.id!=userId){
        debugger
           this.Toast("没有权限删除数据")
           console.log( userId=== user.id  );
            console.log(userId ,user.id );
      }
     
    },
    TalkAbout(){
      this.ToastFunction("/TalkAbout")
    }
  }
};
</script>

<style lang="scss"  scope>
// .slide-fade-enter-active {
//   transition: all 10s ease;
// }
// .slide-fade-leave-active {
//   transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
// }
// .slide-fade-enter, .slide-fade-leave-to
// /* .slide-fade-leave-active for below version 2.1.8 */ {
//   transform: translateX(100px);
//   opacity: 0;
// }
// p {
//   font-size: 1rem;
//   color: whitesmoke;
// }

.flower_box {
 display: flex;
 flex: 1;


  .flower_Centent {
   
    display: flex;
    flex: 1;
    flex-wrap: nowrap;
    justify-content: center;
     
    background-repeat: no-repeat;
    background-position: top;
    .van-pull-refresh {
      width: 100%;
      height: 100%;
        overflow-y: auto;
-webkit-overflow-scrolling: touch;
    }
    .HeaderInformationBox {
      width: 100%;
      height: 5rem;
      padding-bottom: 0.5rem;
      display: flex;
      .Avatar_Traffic {
        width: 100%;
        height: 2rem;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-self: flex-end;
        .Avatar {
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
          margin-left: 0.3rem;
          overflow: hidden;
        }
        .Traffic {
          width: 4rem;
          height: 1rem;
          margin-right: 0.2rem;
          align-self: flex-end;
          display: flex;
          justify-items: center;
          justify-content: space-between;
          flex-wrap: nowrap;

          .BrowseIcon {
            width: 1rem;
            height: 1rem;
            line-height: 0.7rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .flow_Box {
            width: 2.7rem;
            height: 1rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            .TrafficToday,
            .TotalFlow {
              width: 100%;
              height: 0.4rem;
              line-height: 0.4rem;
              display: flex;
              justify-content: space-between;
              .TrafficTodayName,
              .TotalFloName {
                color: white;
                letter-spacing: 1px;
              }
              .TrafficTodayNumder,
              .TotalFlowNumber {
                color: white;
              }
            }
          }
        }
      }
    }
    // Tabbar栏
    .flower_Centent_Tabbar {
      width: 100%;
      height: 2rem;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      background-color: white;
      padding-bottom: 0.5rem;
      .Tabbar_Child_Box {
        width: 1.5rem;
        height: 1.5rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .Tabbar_Icon {
          width: 1rem;
          height: 1rem;
          padding: 0.1rem 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .Name {
          width: 1.3rem;
          height: 0.7rem;
          line-height: 0.7rem;
          color: black;
          text-align: center;
          letter-spacing: 1px;
          font-size: 0.34rem;
        }
      }
    }
    .dynamic_Box {
      width: 100%;
      height: 100%;
      background-color: whitesmoke;
      
      .dynamic {
        width: 100%;
        height: 10rem;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0.2rem 0;
        background-color: #fff;
        .dynamicHeader {
          width: 100%;
          height: 0.8rem;
          line-height: 0.8rem;
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: space-between;
          background:-webkit-linear-gradient(left,#d3491d, #f4eeed);background:-o-linear-gradient(right,#d3491d, #f4eeed);background:-moz-linear-gradient(right,#d3491d, #f4eeed);background:linear-gradient(to right,#d3491d, #f4eeed);
          .dynamicHeaderAvatar {
            width: 0.7rem;
            height: 0.7rem;
            overflow: hidden;
            border-radius: 50%;
            margin-left: 0.2rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .dynamicHeaderName {
            width: 60%;
            height: 0.7rem;
            line-height: 0.9rem;
            font-size: 0.4rem;
            color: black;
            font-family: "Courier New", Courier, monospace;
            display: flex;
          }
          .ShareIt{
           margin-right: 0.2rem;  
          
          }
        }
        .dynamic_text {
          width: 80%;
          height: 1.8rem;
          line-height: 0.9rem;
          font-size: 0.5rem;
          font-weight: 500;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-align: start;
          font-family: "Times New Roman", Times, serif;
        }
        .dynamic_Img {
          width: 80%;
          height: 5rem ;
        }
      }
      .Comment_and_delete{
        width: 100%;
        height: 0.6rem;
        background:-webkit-linear-gradient(left,#e0f2f5, #46addc);background:-o-linear-gradient(right,#e0f2f5, #46addc);background:-moz-linear-gradient(right,#e0f2f5, #46addc);background:linear-gradient(to right,#e0f2f5, #46addc);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
        align-self: flex-end;
        .Comment_and_delete_Icon_Box{
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          width: 2rem;
          span {
            letter-spacing: 1px;
            color: #d3491d;
          }
        }
        .Comment_and_delete_Icon {
         
          color: #d3491d;
        }
      }
    }
  }
}
.van-pull-refresh__track {
  width: 100%;
  height: 100%;

 
  
}
.van-list {
  height: 100%;
  width: 100%;

  

}
.van-image {

}
</style>